<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2D Complex Rotation Animation</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    canvas {
      background-color: #f0f0f0;
      display: block;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas size
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Initial point (1,1)
    const z = { x: 100, y: 100 };  // Coordinates of the point
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // Rotation angle in radians (will animate)
    let angle = 0;

    // Rotation function using complex number multiplication
    function rotateComplex (z, phi) {
      const cosPhi = Math.cos(phi);
      const sinPhi = Math.sin(phi);
      return {
        x: z.x * cosPhi - z.y * sinPhi,
        y: z.x * sinPhi + z.y * cosPhi
      };
    }

    function animate () {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Rotate point
      const rotated = rotateComplex(z, angle);
      const rotatedX = rotated.x + centerX;
      const rotatedY = rotated.y + centerY;

      // Draw the point
      ctx.beginPath();
      ctx.arc(rotatedX, rotatedY, 10, 0, Math.PI * 2);
      ctx.fillStyle = 'blue';
      ctx.fill();

      // Draw center
      ctx.beginPath();
      ctx.arc(centerX, centerY, 10, 0, Math.PI * 2);
      ctx.fillStyle = 'red';
      ctx.fill();

      // Increment angle for animation
      angle += 0.01;

      requestAnimationFrame(animate);
    }

    animate();
  </script>
</body>

</html>